<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米页面</title>
    <style>
        body
        {
            background-color: #999;
        }
        
        body,div
        {
            padding: 0;
            margin: 0 auto;
        }

        .box
        {
           width:1025px;
           /* height:500px; */
           box-sizing: border-box;
           background-color:#999;
        }
        
        .item
        {
            width: 200px;
            height: 500px;
             float: left;
             margin-right: 5px;
             box-sizing: border-box;
            
        }

        .right
        {
              background-color: #fff;
        }

       .top,.bottom
       {
          height: 245px;
          background-color: #fff;
       }

       .top
       {
         margin-bottom: 5px;
       }
        

       .son-top,.son-bottom
       {
         height: 120px;
         
       }

       .son-top
       {
           border-bottom: #999 solid 10px;

       }

       .right img
       {
           width: 200px;
           height: 485px;
       }

       .left .top img
       {
          width: 200px;
          height: 240px;
       }

       .son-bottom img,.son-top img
       {
          height: 120px;
          width: 200px;
       }


    </style>
</head>
<body>

    <div class="box">
         
        <div class="item right">
            <img src="../image/xiaomi.png" alt="图片">
        </div>
        <div class="item left">
            <div class="top">
             <img src="../image/xiaomi-erji.png" alt="">
            </div>
            <div class="bottom">
                 <img src="../image/xiaomi-erji.png" alt="">
            </div>
        </div>
        <div class="item left">
             <div class="top">
             <img src="../image/xiaomi-erji.png" alt="">
            </div>
            <div class="bottom">
                 <img src="../image/xiaomi-erji.png" alt="">
            </div>
        </div>
        <div class="item left">
            <div class="top">
             <img src="../image/xiaomi-erji.png" alt="">
            </div>
            <div class="bottom">
                 <img src="../image/xiaomi-erji.png" alt="">
            </div>
        </div>
        <div class="item left">
            <div class="top">
                 <img src="../image/xiaomi-erji.png" alt="">
            </div>
            <div class="bottom">
                <div class="son-top">
                    <img src="../image/xiaomi-erji2.png" alt="">
                </div>
                <div class="son-bottom">
                    <img src="../image/xiaomi-erji2.png" alt="">
                </div>
            </div>
        </div>
 
    </div>
    
</body>
</html>